<template>
    <container-item-wrapper :widget="widget">
        <el-button :type="widget.options.type" :size="widget.options.size" :disabled="widget.options.disabled">
            {{ widget.options.label }}
        </el-button>
    </container-item-wrapper>
</template>

<script>
import emitter from '@/utils/emitter'
import i18n from "@/utils/i18n"
import refMixin from "@/components/form-render/refMixin"
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'

export default {
    name: "button-item",
    componentName: 'ContainerItem',
    mixins: [emitter, i18n, refMixin, containerItemMixin],
    components: {
        ContainerItemWrapper,
        ...FieldComponents,
        ArrowDown,
        ArrowUp
    },
    props: {
        widget: Object,
    },
    inject: ['refList', 'sfRefList', 'globalModel'],
    computed: {
        customClass() {
            return this.widget.options.customClass || ''
        },

    },
    created() {
        this.initRefList()
    },
    beforeUnmount() {
        this.unregisterFromRefList()
    },
    methods: {
        toggleCard() {
            this.widget.options.folded = !this.widget.options.folded
        },

    },
}
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
    padding: 10px 12px;
}

.folded :deep(.el-card__body) {
    display: none;
}

.clear-fix:before,
.clear-fix:after {
    display: table;
    content: "";
}

.clear-fix:after {
    clear: both;
}

.float-right {
    float: right;
}
</style>